import styled from 'styled-components'
import downLoad from '@/assets/img/download.png'
import banner from '@/assets/img/banner_sprite.png'
export const BannerWrapper = styled.div`
       position:relative;
       background: url(${props => props.bgImage}) center center/6000px;
       .banner{
           height:270px;
           background-color:red;
           display:flex;
           position:flex;
       }
`
export const BannerLeft = styled.div`
       width:730px;
        .banner-item{
            overflow:hidden;
            height:270px;
            .image{
            width:100%;
         }
        }
        .ant-carousel .slick-dots li{
            width:6px;
            height:6px;
            border-radius:50%;
            background-color:#fff;
            margin-left:15px;
        }
       .ant-carousel .slick-dots li button {
            width:6px;
            height:6px;
            border-radius:50%;
       }
      .ant-carousel .slick-dots li.slick-active button {
          background-color:red;
       }
`
//定义a标签上的属性
export const BannerRight = styled.a.attrs({
    href: "https://s2.music.126.net/style/web2/img/index/download.png?c9ab0f579ba65504707229eb44b5348b",
    target: "_blank",
    // 这个是为了消除警告
    rel:"noopener noreferrer"
})
    `
    width:254px;
    height:270px;
    background:url(${downLoad});
`
export const BannerControl = styled.div`
    position:absolute;
    left:0;
    right:0;
    top:35%;
    transform:translateY(-50%);
     .btn{
         position:absolute;
         width:37px;
         height:63px;
         background-image: url(${banner});
         background-color:transparent;
         cursor: pointer;
         &:hover{
             background-color:rgba(0,0,0,.3);
         }
     }
     .left{
         left:20%;
         background-position:0 -360px;
     }
    .right {
        right: 20%;
        background-position: 0 -508px;
    }
`